<template>

    <div ref="MapView">
        <div class="control">
            <RadioGroup v-model="SenceMode" type="button" @on-change="changeSenceMode">
                <Radio label="2D"></Radio>
                <Radio label="3D"></Radio>
            </RadioGroup>
        </div>
    </div>
</template>

<script>

import simpleMap from '../../components/simpleMap'
import gsap from 'gsap';
var map = null;
var mapConfig = [{
    "type": "TD",
    "name": "天地图",
    "layerType": "background",
    "url": "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
    "default": false
}]
// 随机函数
function randomNum(min, max) {
    return parseFloat(Math.random() * (max - min + 1) + min, 10);
}
var timer = null;

export default {
    data() {
        return {
            SenceMode: '2D'
        }

    },
    mounted() {
        map = simpleMap.initMap(this.$refs.MapView, {
            mapOptions: {
                // animation: false, // 关闭默认动画事件
                senceMode: "2D", // 初始化时，以2D模式进行渲染
            },
        });
        map.addProviders(mapConfig);
        map.flytochina();

        // map
        var viewer = map.getViewer();
        var billboards = viewer.scene.primitives.add(new Cesium.BillboardCollection({
            // modelMatrix: new Cesium.Matrix4()
        }));
        var labels = viewer.scene.primitives.add(new Cesium.LabelCollection());


        var count = 500;

        var imageArray = {};
        for (let i = 0; i < count; i++) {
            var id = 'image' + i;
            var position = {
                longitude: randomNum(80, 120),
                latitude: randomNum(25, 45),
                height: randomNum(0, 5000),
            };
            if (!imageArray[id]) {
                imageArray[id] = {};
            }
            var _position = new Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, position.height);
            imageArray[id].p = position;
            imageArray[id].billboard = billboards.add({
                id: 'image' + i,
                position: _position,
                image: './image/plane.png',
                width: 32,
                height: 32,
                color: Cesium.Color.fromCssColorString('#FF6600')
            });
            // imageArray[id]._pos = position;
        }


        for (let i = 0; i < count; i++) {
            var id = 'image' + i;
            imageArray[id].label = labels.add({
                id: 'label' + i,
                position: _position,
                text: 'label' + i,
                showBackground: true,
                font: '10px Source Han Sans CN',
                backgroundColor: new Cesium.Color(0.165, 0.165, 0.165, 1),
                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                verticalOrigin: Cesium.VerticalOrigin.CENTER,
                pixelOffset: new Cesium.Cartesian2(0, -32),
                disableDepthTestDistance: Number.POSITIVE_INFINITY,
                translucencyByDistance: new Cesium.NearFarScalar(200000, 1.0, 300000, 0.0),
            })

        }

        // timer = setInterval(() => {
        //     for (let i = 0; i < count; i++) {
        //         let _p = imageArray['image' + i];
        //         gsap.to(_p.p, {
        //             longitude: _p.p.longitude + 0.02,
        //             latitude: _p.p.latitude + 0.02,
        //             height: _p.p.height + 0.02,
        //             duration: 1,
        //             ease: "none",
        //             onUpdate: () => {
        //                 var _nP = new Cesium.Cartesian3.fromDegrees(_p.p.longitude, _p.p.latitude, _p.p.height);
        //                 _p.billboard.position = _nP;
        //                 _p.label.position = _nP;
        //             }
        //         });
        //     }
        // }, 1000);

    },
    methods: {
        changeSenceMode(type) {
            this.SenceMode = type;
            // 更改当前的显示模式
            map.SenceMode = type;
        },
    },
    beforeDestroy() {
        clearInterval(timer);
        timer = null;
        // 页面被注销时，销毁地图
        map && map.destroy();
        map = null;
    }
}
</script>

<style>
.layout {
    height: 100%;
    width: 100%;
}

.control {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 20px;
    color: #fff;
    z-index: 4;
}
.title {
    color: #fff;
}
.Text {
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px;
}
.itemBox {
    margin-bottom: 5px;
}
</style>